<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/stylesheets/apply.css">
    <title>修改报名表</title>
</head>

<body>

    <!-- head -->
    <div class="head">
        <h1>校科联</h1>
        <a href="/out" class="bi-person-square"></a>
    </div>



    <!--  page-->
    <div class="page">
        <h3>修改报名表</h3>
        <form action="/applychange" method="post" enctype="multipart/form-data">
            <div class="photo">

                <label for="avatarInput">
                    <div class="pic">
                        <img src="./upload/<%= change.avatar %>" alt="" id="avatarPreview">
                    </div>
                </label>
                <input type="file" class="pinput" name="avatar" id="avatarInput" style="display: none;">
            </div>


            <div class="field">
                <span>姓名&nbsp;</span>
                <input type="text" name="name" value="<%= change.name %>">
            </div>

            <div class="field">
                <span>性别&nbsp;</span>
                <select name="gender" id="">
                    <option value="1" <%= change.gender === 1? 'selected':'' %> >男</option>
                    <option value="0" <%= change.gender === 0? 'selected':'' %> >女</option>
                </select>
            </div>
            <div class="field">
                <span>学院&nbsp;</span>
                <select name="college" id="">
                    <option value="1" <%= change.college === 1? 'selected':'' %>>海洋学院</option>
                    <option value="2" <%= change.college === 2? 'selected':'' %>>国际教育学院</option>
                    <option value="3" <%= change.college === 3? 'selected':'' %>>工程学院</option>
                    <option value="4" <%= change.college === 4? 'selected':'' %>>食品学院</option>
                    <option value="5" <%= change.college === 5? 'selected':'' %>>经济管理学院</option>
                    <option value="6" <%= change.college === 6? 'selected':'' %>>公共管理学院</option>
                    <option value="7" <%= change.college === 7? 'selected':'' %>>资源环境学院</option>
                    <option value="8" <%= change.college === 8? 'selected':'' %>>生命科学学院</option>
                    <option value="9" <%= change.college === 9? 'selected':'' %>>动物科学学院</option>
                    <option value="10" <%= change.college ===10? 'selected':'' %>>兽医学院</option>
                    <option value="11" <%= change.college === 11? 'selected':'' %>>园艺学院</option>
                    <option value="12" <%= change.college === 12? 'selected':'' %>>农学院</option>
                    <option value="13" <%= change.college === 13? 'selected':'' %>>林学与风景园林学院</option>
                    <option value="14" <%= change.college === 14? 'selected':'' %>>电子工程学院(人工智能学院)</option>
                    <option value="15" <%= change.college === 15? 'selected':'' %>>水利与土木工程学院</option>
                    <option value="16" <%= change.college === 16? 'selected':'' %>>人文与法学学院</option>
                    <option value="17" <%= change.college === 17? 'selected':'' %>>材料与能源学院</option>
                    <option value="18" <%= change.college === 18? 'selected':'' %>>数学与信息学院(软件学院)</option>
                    <option value="19" <%= change.college === 19? 'selected':'' %>>外国语学院</option>
                    <option value="20" <%= change.college === 20? 'selected':'' %>>艺术学院</option>
                    <option value="21" <%= change.college === 21? 'selected':'' %>>植物保护学院</option>
                    <option value="22" <%= change.college === 22? 'selected':'' %>>马克思主义学院</option>

                </select>
            </div>

            <div class="field">
                <span>专业&nbsp;</span>
                <input type="text" name="major" value="<%= change.major%>">
            </div>
            <div class="field specone">
                <span>手机&nbsp;</span>
                <input type="text" name="number" value="<%= change.number%>" class="number">
            </div>

            <div class="field">
                <span>第一志愿部门&nbsp;</span>
                <select name="first" id="">
                    <option value="1" <%= change.first === 1? 'selected':'' %>>自科部</option>
                    <option value="2" <%= change.first === 2? 'selected':'' %>>社科部</option>
                    <option value="3" <%= change.first === 3? 'selected':'' %>>办公室</option>
                    <option value="4" <%= change.first === 4? 'selected':'' %>>财务部</option>
                    <option value="5" <%= change.first === 5? 'selected':'' %>>项目部</option>
                    <option value="6" <%= change.first === 6? 'selected':'' %>>外联部</option>
                    <option value="7" <%= change.first === 7? 'selected':'' %>>宣传部</option>
                    <option value="8" <%= change.first === 8? 'selected':'' %>>策划部</option>
                    <option value="9" <%= change.first === 9? 'selected':'' %>>竞赛部</option>
                    <option value="10" <%= change.first === 10? 'selected':'' %>>新闻部</option>
                    <option value="11" <%= change.first === 11? 'selected':'' %>>运营部</option>
                </select>
            </div>
            <div class="field">
                <span>第二志愿部门&nbsp;</span>
                <select name="second" id="">
                    <option value="1" <%= change.second === 1? 'selected':'' %>>自科部</option>
                    <option value="2" <%= change.second === 2? 'selected':'' %>>社科部</option>
                    <option value="3" <%= change.second === 3? 'selected':'' %>>办公室</option>
                    <option value="4" <%= change.second === 4? 'selected':'' %>>财务部</option>
                    <option value="5" <%= change.second === 5? 'selected':'' %>>项目部</option>
                    <option value="6" <%= change.second === 6? 'selected':'' %>>外联部</option>
                    <option value="7" <%= change.second === 7? 'selected':'' %>>宣传部</option>
                    <option value="8" <%= change.second === 8? 'selected':'' %>>策划部</option>
                    <option value="9" <%= change.second === 9? 'selected':'' %>>竞赛部</option>
                    <option value="10" <%= change.second === 10? 'selected':'' %>>新闻部</option>
                    <option value="11" <%= change.second === 11? 'selected':'' %>>运营部</option>
                    <option value="12" <%= change.second === 12? 'selected':'' %>>无</option>
                </select>
            </div>
            <div class="field">
                <span>面试方式&nbsp;</span>
                <select name="way" id="">
                    <option value="1">创客空间线下面试</option>
                </select>
            </div>


            <textarea class="remark" name="remark" id="" cols="30" rows="10" placeholder="个人简介(不少于20字)" ><%= change.remark%></textarea>
            <div class="total">
                0/300字
            </div>
            <div class="intr">作品图片(可选)</div>
            <div class="work">
                <input type="file" id="one" name="one" style="display: none;">
                <input type="file" id="two" name="two" style="display: none;">
                <input type="file" id="three" name="three" style="display: none;">
                <div class="show">
                    <label for="one">
                        <div class="mod"><img src="./upload/<%= change.one %>" alt="" id="workone"></div>
                    </label>
                    <label for="two">
                        <div class="mod"><img src="./upload/<%= change.two %>" alt="" id="worktwo"></div>
                    </label>
                    <label for="three">
                        <div class="mod"><img src="./upload/<%= change.three %>" alt="" id="workthree"></div>
                    </label>
                </div>
            </div>

            <button type="submit">修改</button>

        </form>
    </div>

    <div class="func"></div>
    <!-- fixed -->

    <div class="fixed">

        <a href="/prehome" class="bi-house-door-fill"></a>
        <a href="" class="bi-bar-chart-fill"></a>
        <a href="" class="bi-envelope"></a>
    </div>



    <script src="/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <script>
         const tot = document.querySelector('.total')
            const txt = document.querySelector('textarea')
            txt.addEventListener('input', () => {
                tot.innerHTML = `${txt.value.length}/300字`
            })
            
        document.getElementById('avatarInput').addEventListener('change', function (event) {
            var input = event.target;
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                // 当文件读取完成时触发load事件
                reader.onload = function (e) {
                    // 将Base64格式的图片数据赋值给img标签的src属性
                    document.getElementById('avatarPreview').src = e.target.result;
                    // 显示预览图
                    /* document.getElementById('avatarPreview').style.display = 'block'; */
                };

                // 读取图片为DataURL（Base64编码）
                reader.readAsDataURL(input.files[0]);
            }
        }, false);
        /*  1*/
            document.getElementById('one').addEventListener('change', function (event) {
                var input = event.target;
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    // 当文件读取完成时触发load事件
                    reader.onload = function (e) {
                        // 将Base64格式的图片数据赋值给img标签的src属性
                        document.getElementById('workone').src = e.target.result;
                        // 显示预览图
                        /* document.getElementById('avatarPreview').style.display = 'block'; */
                    };

                    // 读取图片为DataURL（Base64编码）
                    reader.readAsDataURL(input.files[0]);
                }
            }, false);
            /* 2 */
            document.getElementById('two').addEventListener('change', function (event) {
                var input = event.target;
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    // 当文件读取完成时触发load事件
                    reader.onload = function (e) {
                        // 将Base64格式的图片数据赋值给img标签的src属性
                        document.getElementById('worktwo').src = e.target.result;
                        // 显示预览图
                        /* document.getElementById('avatarPreview').style.display = 'block'; */
                    };

                    // 读取图片为DataURL（Base64编码）
                    reader.readAsDataURL(input.files[0]);
                }
            }, false);
            /* 3 */
            document.getElementById('three').addEventListener('change', function (event) {
                var input = event.target;
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    // 当文件读取完成时触发load事件
                    reader.onload = function (e) {
                        // 将Base64格式的图片数据赋值给img标签的src属性
                        document.getElementById('workthree').src = e.target.result;
                        // 显示预览图
                        /* document.getElementById('avatarPreview').style.display = 'block'; */
                    };

                    // 读取图片为DataURL（Base64编码）
                    reader.readAsDataURL(input.files[0]);
                }
            }, false);
        

            /* limit */
            const field = document.querySelector('.specone')
                var form = document.querySelector('form');
                form.addEventListener('submit', function (event) {
                    event.preventDefault(); // 阻止默认提交行为

                    var phoneNumberInput = document.querySelector('.number');
                    var phoneNumber = phoneNumberInput.value.trim();

                    // 验证手机号码格式（仅限11个数字）
                    var isValidPhoneNumber = /^\d{11}$/.test(phoneNumber);

                    if (!isValidPhoneNumber) {
                        phoneNumberInput.classList.add('invalid');
                        field.classList.add('invalids')
                        alert('手机号码格式错误');
                    }


                    var introductionInput = document.querySelector('.remark');
                    var introduction = introductionInput.value.trim();

                    // 验证自我介绍长度（不少于20个字符）
                    var isValidIntroduction = /^.{20,}$/.test(introduction);

                    if (!isValidIntroduction) {
                        introductionInput.classList.add('invalid');
                        introductionInput.classList.add('invalids');
                        alert('自我介绍不少于20字');
                       
                    }

                    if (isValidPhoneNumber || isValidIntroduction) {
                        if (isValidIntroduction) {
                            introductionInput.classList.remove('invalid')
                            introductionInput.classList.remove('invalids')
                        }
                        if (isValidPhoneNumber) {
                            phoneNumberInput.classList.remove('invalid')
                            field.classList.remove('invalids')
                        }
                        if (isValidPhoneNumber && isValidIntroduction) {
                            form.submit()
                        }
                        return
                    }






                })
    </script>
</body>

</html>